<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>myTask2</title>
	<link rel="stylesheet" type="text/css" href="styles/task2.css" >
</head>
<body>
	<!-- 带导航的页头 -->
	<header>
		<div class="baidu-icon"><img src="images/baidu.png" width="120px" height="40px" alt="baidu" /></div>
		<nav>
			<ul class="nav-list">
				<li><a href="#A1">导航链接一</a></li>
				<li><a href="#A2">导航链接二</a></li>
				<li><a href="#A3">导航链接三</a></li>
				<li><a href="#A4">导航链接四</a></li>
			</ul>
		</nav>
	</header>
	
	<div class="container">
	<!-- 主页面内容区 -->
		<main>
			<!-- 第一篇文章 -->
			<article >
				<h1><a name="A1">第一篇文章一级标题</a></h1>
				<h2>文章二级标题</h2>
				<div><small>文章作者</small>  <small>文章发表时间</small></div>
				<p>这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落。</p> 
				<p>这是第二段很长很长的段落，这是第二段很长很长的段落，这里有个<strong>重要的词</strong>，这里有一个<em>强调的词</em>，这是第二段很长很长的段落，这是第二段很长很长的段落。</p>
				<p>这是第三段很长很长的段落，这是第三段很长很长的段落，这里有一个<a href="http://ife.baidu.com">百度前端技术学院</a>的链接，这是第三段很长很长的段落，这是第三段很长很长的段落，这是第三段很长很长的段落。</p>
				<p>这是第四段很长很长的段落，这里有个<b>加粗的词</b>，这是第四段很长很长的段落，这里有个<i>斜体的词</i>，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落。</p>
				
				<div class="beatifulGirl"><img width="200px" height="200px" src="images/beatifulGirl.jpg" alt="美女" title="美女" /></div>
				
				<p>这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是一个<b>加粗的词</b>，这是第五段很长很长的段落，这里有一个在新窗口打开的链接<a href="http://ife.baidu.com" target="_blank" >百度前端技术学院</a>，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落，这是第五段很长很长的段落。</p> 
			</article>
			
			<!-- 第二篇文章 -->
			<article>
				<h1><a name="A2">第二篇文章一级标题</a></h1>
				<h2>文章二级标题</h2>
				
				<div><small>文章作者</small>  <small>文章发表时间</small></div>
				
				<p>这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落，这是第一段很长很长的段落。</p>
				<p>这是第二段很长很长的段落，这是第二段很长很长的段落，这里有个<strong>重要的词</strong>，这里有一个<em>强调的词</em>，这是第二段很长很长的段落，这是第二段很长很长的段落。</p>
				<p>这是第三段很长很长的段落，这是第三段很长很长的段落，这里有一个<a href="http://ife.baidu.com">百度前端技术学院</a>的链接，这是第三段很长很长的段落，这是第三段很长很长的段落，这是第三段很长很长的段落。</p>
				<p>这是第四段很长很长的段落，这里有个<b>加粗的词</b>，这是第四段很长很长的段落，这里有个<i>斜体的词</i>，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落，这是第四段很长很长的段落。</p>
				
				<div><img width="200px" height="200px" src="images/handsomeBoy.jpg" alt="帅哥" title="帅哥" /></div>
				
				<ul class="pros-list">
					<li>列表项目一</li>
					<li>列表项目二</li>
					<li>列表项目三</li>
				</ul>
			</article>  
			<article>
				<h1><a name="A3">图片</a></h1>
				<ul class="pic-list">
					<li><p>这是好看的赛车图片</p><img src="images/pic1.jpg"  width="200px" height="200px" alt="pic1"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic2.jpg"  width="200px" height="200px" alt="pic2"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic3.jpg"  width="200px" height="200px" alt="pic3"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic4.jpg"  width="200px" height="200px" alt="pic4"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic5.jpg"  width="200px" height="200px" alt="pic5"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic6.jpg"  width="200px" height="200px" alt="pic6"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic7.jpg"  width="200px" height="200px" alt="pic7"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic8.jpg"  width="200px" height="200px" alt="pic8"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic9.jpg"  width="200px" height="200px" alt="pic9"></li>
					<li><p>这是好看的赛车图片</p><img src="images/pic10.jpg" width="200px" height="200px"  alt="pic10"></li>
				</ul>
			</article>
			<!-- 第三篇文章 -->
			<article>
				<h1><a name="A4">第三篇文章一级标题</a></h1>
				<h2>文章二级标题</h2>
				<div><small>文章作者</small>  <small>文章发表时间</small></div>
				
				<ol>
					<li>排名1</li>
					<li>排名2</li>
					<li>排名3</li>
				</ol>
				
				<table id="tb">
					<tr class="table-head">
						<th>表头</th>
						<th>表头</th>
						<th>表头</th>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr>
						<td>表内容单元格</td>
						<td>表内容单元格</td>
						<td><a href="#">操作</a></td>
					</tr>
					<tr class="total">
						<td>总计</td>
						<td colspan="2">1000</td>
					</tr>
				</table>
			</article>
		</main>
	<!-- 侧边栏	 -->
		<aside>
			<div id="aside-title">
				<h1>这是一个侧栏的标题</h1>
			</div>

			<form action="">
				<p class="row">
					<label class="form-label" for="mail">请输入邮箱地址：</label>
					<input type="text" id="mail" placeholder="请输入正确邮箱地址" />
					<p class="hint">邮箱地址请按要求格式输入</p>
				</p>
				<p class="row">
					<label class="form-label" for="pd">请输入密码：</label>
					<input type="password" id="pd" placeholder="请输入密码" />
				</p>
				<p class="row">
					<label class="form-label" for="cpd">请重复输入密码：</label>
					<input type="password" id="cpd" placeholder="请确认密码" />
					<p class="hint">密码请为6-16位英文数字</p>
				</p>
				<p class="row">
					<label class="form-label" for="sex" >性别：</label>
					<input type="radio" name="sex" id="male" value="male" checked />男
					<input type="radio" name="sex" id="female" value="female" />女
				</p>
				
				<p class="row">
					<label class="form-label" for="city">城市：</label>
					<select name="city" id="city">
						<option value="beijing">北京</option>
						<option value="shanghai">上海</option>
						<option value="guangzhou">广州</option>
						<option value="shenzhen">深圳</option>
						<option value="nanjing">南京</option>
						<option value="suzhou">苏州</option>
					</select>	
				</p>
				
				<p class="row">
					<label class="form-label" for="hobies">爱好：</label>
					<input type="checkbox" name="sport" value="sport" />运动
					<input type="checkbox" name="art" value="art" />艺术
					<input type="checkbox" name="science" value="science" />科学
				</p>

				<p class="row">
					<label class="form-label" for="scrible">个人描述：</label>
					<textarea name="scrible" id="scrible" cols="30" rows="5" placeholder="多行输入文本框" ></textarea>
				</p>
				<p class="row sub">
					<input class="btn" type="button" value="确认提交" />
				</p>	
			</form>
		</aside>
	</div>

	

	<footer>
		<p>版权所有&copy;</p>
	</footer>
</body>
</html>